
import { useEffect, useState } from "react";
import OperaBtnRender from '@/components/OperaBtnRender';
import TableRender from '@/components/TableRender';
import EditStorageModal from "./EditStorage";
import { Button, Popconfirm, message } from 'antd';
import api from '../service';

const TableList = ({ query, headerHeight }) => {

	const [tableData, setTableData] = useState([]);

	const [visible, setVisible] = useState(false);

	const [item, setItem] = useState();

	const columns = [
		{
			title: '序号',
			code: 'id',
			width: 80,
			render: (t, r, i) => i + 1,
		},
		{
			title: '仓库名称',
			code: 'warehouseName',
			width: 120
		},
		{
			title: '自发或代发',
			code: 'isOpen',
			width: 120,
			render: (t, r) => {
				if (r.kind == 1) {
					if (t == 0) {
						return '自发';
					}
					if (t == 1) {
						return '代发';
					}
				}
				return '/';
			}
		},
		{
			title: '仓库类型',
			code: 'kind',
			width: 120,
			render: (t, r) => {
				if (t == 1) {
					return '发货仓';
				}
				if (t == 2) {
					return '次品仓';
				}
				if (t == 3) {
					return '销退仓';
				}
			}
		},
		{
			title: '城市',
			code: 'city',
			width: 120
		},
		{
			title: '仓库编号',
			code: 'warehouseCode',
			width: 120
		},
		{
			title: '状态',
			code: 'state',
			width: 120,
			render: t => {
				if (t == 1) {
					return <span style={{ color: '#F03D29' }}>已禁用</span>
				}
				if (t == 0) {
					return <span style={{ color: '#00BC75' }}>已启用</span>
				}
				return null;
			}
		},
		{
			title: '可用快递',
			code: 'logisticsList',
			width: 320,
			render: t => {
				if (t && t.length > 0) {
					const arr = t.map(v => v.logisticsName);
					return arr.join('、');
				}
				return null;
			}
		},
		{
			title: '操作',
			code: 'isOpen',
			width: 120,
			lock: true,
			render: (t, r) => {
				//默认店铺不允许操作禁用启用，isDefault == 0,默认

				const disabled = (r.isDefault == 0 && t == 0) || r.kind != 1;
				return (
					<>
						{(t == 0 || r.kind != 1) ? <Button type="link" onClick={() => editStorage(r)}>编辑</Button> : null}
						{r.state == 0 ?
							<Popconfirm
								title="确认禁用该仓库吗?"
								disabled={disabled}
								onConfirm={() => updateStatus(r.id, 1)}
							>
								<Button disabled={disabled} type="link" danger>禁用</Button>
							</Popconfirm>
							: null}
						{r.state == 1 ?
							<Popconfirm
								title="确认启用该仓库吗?"
								disabled={disabled}
								onConfirm={() => updateStatus(r.id, 0)}
							>
								<Button disabled={disabled} type="link">启用</Button>
							</Popconfirm>
							: null}
					</>
				)
			}
		},
	]

	//初始化请求接口
	useEffect(() => {
		getTableList();
	}, [query])

	//请求数据
	const getTableList = async () => {
		START_LOADING();
		const { success, data } = await api.queryStorageList({
			...query
		});
		END_LOADING();
		if (success) {
			setTableData(data);
		}
	}

	//更新仓库状态
	const updateStatus = async (id, bool) => {
		START_LOADING();
		const { success } = await api.updateStorageState({
			state: bool,
			warehouseId: id
		})
		END_LOADING();
		if (success) {
			message.success('操作成功！');
			getTableList();
		}
	}

	//添加仓库
	const addStorage = () => {
		setVisible(true);
	}

	//编辑仓库
	const editStorage = (r) => {
		setVisible(true);
		setItem(r);
	}

	//表格组件
	const TableRenderProps = {
		rowKey: 'id',
		data: tableData,
		columns,
		style: {
			height: `calc(100vh - ${headerHeight + 186}px)`
		},
		columnResizeOption: {},
		pageConfig: {
			showPage: false,
		}
	}

	//新增和编辑弹框
	const EditStorageModalProps = {
		item,
		//发货仓数量
		warehouseCount: tableData.filter(v => v.kind == 1 && v.isOpen == 0).length,
		handleCancel() {
			setVisible(false);
			setItem();
		},
		handleOk() {
			setVisible(false);
			setItem();
			getTableList();
		}
	}

	//操作按钮
	const btnArr = [
		{ elType: 'button', text: '新建仓库', onClick: addStorage }
	]

	return (
		<>
			<div className='global-page-wrap'>
				<OperaBtnRender style={{ marginBottom: '12px' }} btnArr={btnArr} />
				<TableRender {...TableRenderProps} />
			</div>
			{visible && <EditStorageModal {...EditStorageModalProps} />}
		</>
	)
}

export default TableList;
